<template>
	<view class="recommendContainer">
		<!-- 轮播图 -->
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image src="../../static/bg.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/bg.jpg"></image>
			</swiper-item>
		</swiper>
		
		<!-- 政策信息 -->
		<view class="policyDescList">
			<view class="policyDescItem" v-for="(policyDesc, index) in policyDescList" :key='index'>
				<image :src="policyDesc.icon"></image>
				<text>{{policyDesc.desc}}</text>
			</view>
		</view>
		
		<!-- 导航菜单 -->
		<view class="kongKongModule">
			<view class="kingKongItem" v-for="kingKong in kingKongList" :key='kingKong.L1Id'>
				<image :src="kingKong.picUrl"></image>
				<text>{{kingKong.text}}</text>
			</view>
		</view>
	
		<view class="">
			<category />
		</view>
	</view>
</template>

<script>
	import category from '../categoy/category.vue';
	import { mapGetters } from 'vuex';
	export default{
		name: 'recommend',
		components:{
			category
		},
		computed:{
			...mapGetters(['kingKongList', 'policyDescList'])
		}
	}
</script>

<style lang="stylus">
	.recommendContainer
		.banner
			width 100%
			height 350upx
			image
				width 100%
				height 100%
		.policyDescList
			display flex
			.policyDescItem
				flex 1
				text-align center
				image
					width 32upx
					height 32upx
					vertical-align middle
				text
					font-size 24upx
					vertical-align middle
		.kongKongModule
			display flex
			flex-wrap wrap
			margin-top 20upx
			.kingKongItem
				width 20%
				display flex
				flex-direction column
				align-items center
				image
					width 110upx
					height 110upx
				text
					font-size 26upx
					line-height 30upx
</style>
